import { useEffect, useState } from "react";
import { Button, DatePicker, Form, Select } from "antd";
import { page as pageGroup } from '@/views/attendance/group/api';
import { monthFirstDay, monthLastDay, weekFirstDay, weekLastDay } from "@/utils/date";
import dayjs from "dayjs";
import { getTenantId } from "@/utils/storage";

const StandardForm = ({ props = {} }) => {
    const [standardForm] = Form.useForm();

    const { row, isOpenDialog, onSubmit, onCallback } = props;
    const [preset, setPreset] = useState([]);

    const initPreset = (date) => {
        if (!date) {
            date = dayjs();
        }
        
        return [
            { label: '后几天', value: [date, weekLastDay(date)] },
            { label: '下一周', value: [weekFirstDay(date, 1), weekLastDay(date, 1)] },
            { label: '下一月', value: [monthFirstDay(date, 1), monthLastDay(date, 1)] },
        ];
    }

    // 班组下拉多选
    const [classGroupOptions, setClassGroupOptions] = useState([]);
    const onSearchClassGroupHandler = (val) => {
        let query = {
            params: [
                // { field: 'tenantId', value: getTenantId() },
                { field: 'name', expr: 'LIKE_LEFT', value: val },
            ]
        };
        pageGroup(query).then(resp => {
            let options = resp?.data?.records.map(item => ({
                label: item.name,
                value: item.id,
            }));
            setClassGroupOptions(options);
        });
    }

    const onSubmitHandler = () => {
            standardForm.validateFields().then(model => {
                let params = {
                    type: 'standard',
                    data: {
                        tenantId: getTenantId(),
                        groupId: model.groupId,
                        startDate: dayjs(model.workday[0]).format('YYYY-MM-DD'),
                        endDate: dayjs(model.workday[1]).format('YYYY-MM-DD'),
                    },
                };
                onSubmit(params, onSubmitCallback);
                onCancelHandler();
            });
    }
    
    const onSubmitCallback = (model) => {
        onCallback(model?.data.startDate);
    }

    const onCancelHandler = () => {
        standardForm.resetFields();
        isOpenDialog();
    }

    useEffect(() => {
        setPreset(initPreset(row?.workDate[0]));
        standardForm.setFieldValue();
    }, [row]);

    return (
        <div>
            <Form
                form={standardForm}
                name="standardForm"
                labelCol={{ xs: 24, sm: 8, md: 6, lg: 4 }}
                labelAlign='right'
                style={{ padding: '0 12px' }}
            >
                <Form.Item label="班组" name="groupId" rules={[{ required: true, message: '请选择班组' }]}>
                    <Select
                        showSearch
                        allowClear
                        placeholder="请选择班组"
                        optionFilterProp="label"
                        filterOption={false}
                        onSearch={(val) => onSearchClassGroupHandler(val)}
                        options={classGroupOptions}
                    />
                </Form.Item>

                <Form.Item label="日期" name="workday" rules={[{ required: true, message: '请选择日期' }]}>
                    <DatePicker.RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} allowClear presets={preset} />
                </Form.Item>
            </Form>

            <div style={{ textAlign: 'right' }}>
                <Button style={{ marginRight: 16 }} onClick={onCancelHandler}>取消</Button>
                <Button type="primary" htmlType="submit" onClick={onSubmitHandler}>确认</Button>
            </div>
        </div>
    );
}

export default StandardForm;